<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
	  <meta http-equiv="cache-control" content="no-cache">
	  <meta http-equiv="expires" content="0">    
	  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	  <meta http-equiv="description" content="This is my page">
   
    <script src="/js/vue.min.js"></script>
    <script src="/js/httpVueLoader.js"></script><!-- 引入 http-vue-loader -->   
    <script type="text/javascript" src="/js/axios.min.js"></script>

    <link href="/css/front.css" rel="stylesheet">
    
</head>

<body>
<div id="app">
<my-header></my-header> 


<article> 
  <!--左侧-->
  <div class="lbox"> 
    
    
    <!-- 444 -->
     <div class="zhuanti whitebg" style="margin-top: 12px;">
      <!-- <h2 class="htitle"><span class="hnav"></span>111</h2> -->
      <div>
        <form action="" name="form1" method="post">
	                                  <table width="100%"  border="0" cellpadding="8" cellspacing="1">
                                        <tr style="height: 43px;">
                                            <td width="65" align="right">
                                                                                                                                                   账号：
                                            </td>
                                            <td align="left">
                                                &nbsp;<input type="text" v-model.trim="user.username" style="width: 288px;"/>
                                            </td>
                                        </tr>
                                        <tr style="height: 43px;">
                                            <td width="65" align="right">
                                                                                                                                                 密码：
                                            </td>
                                            <td align="left">
                                                &nbsp;<input type="password" v-model.trim="user.password"  style="width: 288px;"/>
                                            </td>
                                        </tr>
                                        <tr style="height: 43px;">
                                            <td width="65" align="right">
                                                                                                                                                    姓名：
                                            </td>
                                            <td align="left">
                                                &nbsp;<input type="text" v-model="user.xingming" style="width: 288px;"/>
                                            </td>
                                        </tr>
                                        <tr style="height: 43px;">
                                            <td width="65" align="right">
                                                                                                                                                性别：
                                            </td>
                                            <td align="left">
                                                &nbsp;<input type="radio" v-model="user.xingbie" value="男" style="border: 0px;"/>男
                                                &nbsp;&nbsp;
                                                &nbsp;<input type="radio" v-model="user.xingbie" value="女" style="border: 0px;"/>女
                                                
                                            </td>
                                        </tr>
                                        <tr style="height: 43px;">
                                            <td width="65" align="right">
                                                                                                                                                 年龄：
                                            </td>
                                            <td align="left">
                                                &nbsp;<input type="text" v-model="user.nianling" style="width: 288px;" 
                                                onkeyup="value=value.replace(/[^\d]/g,'') " 
                                                onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"/>
                                            </td>
                                        </tr>
                                        <tr style="height: 43px;">
                                            <td width="65" align="right">
                                                                                                                                                    住址：
                                            </td>
                                            <td align="left">
                                                &nbsp;<input type="text" v-model="user.dizhi" style="width: 388px;"/>
                                            </td>
                                        </tr>
                                        <tr style="height: 43px;">
                                            <td width="65" align="right">
                                                                                                                                                  电话：
                                            </td>
                                            <td align="left">
                                                &nbsp;<input type="text" v-model="user.dianhua" style="width: 288px;"/>
                                            </td>
                                        </tr>
                                        <tr style="height: 43px;">
                                            <td width="65" align="right">
                                                                                                                                                      邮箱：
                                            </td>
                                            <td align="left">
                                                &nbsp;<input type="text" v-model="user.youxiang" style="width: 288px;"/>
                                            </td>
                                        </tr>
                                        <tr height="30">
                                            <td width="65" align="right">
                                                &nbsp;
                                            </td>
                                            <td align="left">
                                            &nbsp;<input type="button" value="提交" @click="userReg()" style="width: 70px;"/>&nbsp; 
                                            </td>
                                        </tr>
                                     </table>   
                                  </form> 
      </div>
    </div>
    <!-- 444 -->
    
    
    
    
    
    
    
    
    
  </div>
  <!--左侧-->
  
  
  
  
  
  
  
  
  <!--右侧-->
  <div class="rbox">
      <my-right></my-right>
  </div>
  <!--右侧-->
  
  
</article>



<my-foot></my-foot>



    
</div>


<script>
    new Vue({
        el: '#app',
        data: 
		{
			user:{
                  uid:0,
				  username:"",
                  password:"000000",
                  xingming:"",
                
                  xingbie:"男",
                  nianling:20,
                  dizhi:"",
                  dianhua:"",
                
                  youxiang:"",
                  fujian:"",
                  shijian:"",
                  del:"",
			},
        },
        
        methods: 
		{
			userReg()
			{
				if(this.user.username=="")
				{
					alert("请输入账号");
					return;
				}
				if(this.user.password=="")
				{
					alert("请输入密码");
					return;
                }
                if(this.user.xingming=="")
				{
					alert("请输入姓名");
					return;
				}
				
				axios({
						method: 'POST',
						url: '/userReg',
						data: this.user,
						params:{
							//code:123,
							//dode:456
						}
						}).then(data => {
							//console.log(data);
							//alert(data.data.state);
							if (data.data.state == 66)
							{
								alert("注册成功，可以登录了");
								location.href="/index.html";
							} 
						    if (data.data.state == 44)
							{
								alert("账号已被占用");
							}
						}).catch(error => {
							//console.log(error);
							alert(error);
						})
            },
            


		},

        components: {
            'my-header': httpVueLoader('/components/my-header.vue'),
            'my-foot': httpVueLoader('/components/my-foot.vue'),
            'my-right': httpVueLoader('/components/my-right.vue'),
        }
    })
</script>
</body>

</html>